<template>
  <div>
    <h3>{{ title }} <button @click="num++;emits('update:modelValue',num)">{{ num }}</button></h3>
      我是弹框组件{{ count  }}
      <p>{{ msg }}</p>
    <div>{{ content }}</div>
    <button @click="emits('close',false)">关闭</button>
    <button @click="emits('update:visible',false)">关闭2</button>
    <button class="color" @click="color='blue'">blue</button>
  </div>
</template>
<script setup>
import {inject,ref,onMounted} from 'vue'
const count = inject('count')
const msg  = ref('好消息');
defineExpose({
  msg
})
const props = defineProps({
  title:{
    type:String,
    default:'我是默认标题'
  },
  content:{
    type:String,
    default:'我是默认内容'
  },
  modelValue:{
    type:Number,
    default:0
  },
  visible:{
    type:Boolean,
    default:false
  }
})
const num = ref(props.modelValue);
const color=ref('red');
 

const emits = defineEmits(['close','update:modelValue',"update:visible"])

</script>
<style>
.color{
  color:v-bind(color);
}
</style>